<template>
<div class="home">
  <div id="flashBoxu_u0_">
    <swiper :options="swiperOption">
      <swiper-slide><img src="/static/img/ppt4.jpg" border="0" width="1000" height="200" alt="图书馆毕业照" title="图书馆毕业照" /></swiper-slide>
      <swiper-slide><img src="/static/img/byzbf04.jpg" border="0" width="1000" height="200" alt="2018届毕业生学位授予仪式" title="2018届毕业生学位授予仪式" /></swiper-slide>
      <swiper-slide><img src="/static/img/apple.jpg" border="0" width="1000" height="200" /></swiper-slide>
      <swiper-slide><img src="/static/img/banner04.jpg" border="0" width="1000" height="200" /></swiper-slide>
      <swiper-slide><img src="/static/img/banner05.jpg" border="0" width="1000" height="200" /></swiper-slide>
      <swiper-slide><img src="/static/img/banner006.jpg" border="0" width="1000" height="200" /></swiper-slide>
      <swiper-slide><img src="/static/img/banner07.jpg" border="0" width="1000" height="200" /></swiper-slide>
    </swiper>
  </div>

  <div class="main">
        <div class="news">
            <div class="title">
                <h2 class="title_left">{{$t('m.Other_OJ')}}</h2>
            </div>
            <div class="news_list">
                <ul>
                    <li>
                        <span><a href="http://poj.org/">{{$t('m.Link')}}</a></span>
                        <a href="http://poj.org/">{{$t('m.OJ_pku')}}</a>
                    </li>
                    <li>
                        <span><a href="https://dsa.cs.tsinghua.edu.cn/oj/">{{$t('m.Link')}}</a></span>
                        <a href="https://dsa.cs.tsinghua.edu.cn/oj/">{{$t('m.OJ_tsinghua')}}</a>
                    </li>
                    <li>
                        <span><a href="http://bitacm.openjudge.cn/">{{$t('m.Link')}}</a></span>
                        <a href="http://bitacm.openjudge.cn//">{{$t('m.OJ_bit')}}</a>
                    </li>
                    <li>
                        <span><a href="https://zoj.pintia.cn/">{{$t('m.Link')}}</a></span>
                        <a href="https://zoj.pintia.cn/home/news">{{$t('m.OJ_zju')}}</a>
                    </li>
                    <li>
                        <span><a href="http://acm.hdu.edu.cn/">{{$t('m.Link')}}</a></span>
                        <a href="http://acm.hdu.edu.cn/">{{$t('m.OJ_hdu')}}</a>
                    </li>
                    <li>
                        <span><a href="http://acm.csu.edu.cn/index">{{$t('m.Link')}}</a></span>
                        <a href="http://acm.csu.edu.cn/index">{{$t('m.OJ_csu')}}</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="course">
            <div class="title">
                <h2 class="title_left">{{$t('m.Other_website')}}</h2>
            </div>
                    
                <div class="news_list">
                    <ul>
                        <li>
                            <span><a href="https://www.luogu.com.cn/">{{$t('m.Link')}}</a></span>
                            <a href="https://www.luogu.com.cn/">{{$t('m.Web_luogu')}}</a>
                        </li>
                        <li>
                            <span><a href="http://www.cspro.org/">{{$t('m.Link')}}</a></span>
                            <a href="http://www.cspro.org/">{{$t('m.Web_csp')}}</a>
                        </li>
                        <li>
                            <span><a href="https://www.patest.cn/">{{$t('m.Link')}}</a></span>
                            <a href="https://www.patest.cn/">{{$t('m.Web_pat')}}</a>
                        </li>
                        <li>
                            <span><a href="https://www.nowcoder.com/">{{$t('m.Link')}}</a></span>
                            <a href="https://www.nowcoder.com/">{{$t('m.Web_nowcoder')}}</a>
                        </li>
                        <li>
                            <span><a href="https://leetcode.com/">{{$t('m.Link')}}</a></span>
                            <a href="https://leetcode.com/">{{$t('m.Web_leetcode')}}</a>
                        </li>
                        <li>
                            <span><a href="https://www.acwing.com/">{{$t('m.Link')}}</a></span>
                            <a href="https://www.acwing.com/">{{$t('m.Web_AcWing')}}</a>
                        </li>
                    </ul>
                </div>
        </div><!-- course结束 -->

        <div class="video">
            <div class="title">
                <h2 class="title_left">{{$t('m.Other_tool')}}</h2>
            </div>	
            <div class="news_list">
                <ul>
                    <li>
                            <span><a href="https://sourceforge.net/projects/orwelldevcpp/">{{$t('m.Link')}}</a></span>
                            <a href="https://sourceforge.net/projects/orwelldevcpp/">{{$t('m.Tool_dev')}}</a>
                    </li>
                    <li>
                            <span><a href="https://code.visualstudio.com/">{{$t('m.Link')}}</a></span>
                            <a href="https://code.visualstudio.com/">{{$t('m.Tool_vs')}}</a>
                    </li>
                    <li>
                            <span><a href="https://www.sublimetext.com/">{{$t('m.Link')}}</a></span>
                            <a href="https://www.sublimetext.com/">{{$t('m.Tool_st')}}</a>
                    </li>
                    <li>
                            <span><a href="https://www.jetbrains.com/clion/">{{$t('m.Link')}}</a></span>
                            <a href="https://www.jetbrains.com/clion/">{{$t('m.Tool_CLion')}}</a>
                    </li>
                    <li>
                            <span><a href="http://www.codeblocks.org/">{{$t('m.Link')}}</a></span>
                            <a href="http://www.codeblocks.org/">{{$t('m.Tool_cb')}}</a>
                    </li>
                </ul>
                    <li>
                            <span><a href="https://tool.lu/coderunner/">{{$t('m.Link')}}</a></span>
                            <a href="https://tool.lu/coderunner/">{{$t('m.Tool_on')}}</a>
                    </li>
                </ul>
            </div>
        </div>
  </div>
</div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
          reverseDirection: true,
          waitForTransition: true
        },
        speed: 100,
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6
        }
      }
    }
  }
}
</script>
<style type="text/css">

.home{
    width:1020px;
    min-width: 1020px;
    left: 90px;
    right: 90px;
    position:relative;
    height: auto;
}

ul,li{
    padding:0;
    margin:0;
    list-style:none;}
#flashBoxu_u0_{
    height:200px;
    border:0px solid #EEE;
    
    margin-left: auto;
    margin-right: auto;}
#flashBoxu_u0_ img{
    border:0px solid #FFF;}
#flashBoxu_u0_ ul{
    position:absolute;
    right:7px;
    bottom:3px;
    font:9px tahoma;}
#flashBoxu_u0_ ul li{
    display:block;
    float:left;
    width:12px;
    height:12px;
    line-height:12px;
    margin-right:3px;
    border:0px solid #999;
    background:#F0F0F0;
    text-align:center;
    cursor:pointer;}
#flashBoxu_u0_ ul li.hover{
    border-color:red;
    background:#FFE1E1;
    color:red;}

.main {
	height: 250px;
}

.news {
	width: 320px;
	border: 1px solid #E8E8E8;
    background-color: #FFF;
    float: left;
	height: 250px;
}

.title {
    height: 35px;
	border-bottom: 2px solid #E8E8E8;
	line-height: 35px;
}

.title_left {
	font-size: 14px;
	font-family: "微软雅黑";
	color: #8E8E8E;
	float: left;
	padding-left: 20px;
}

.title_right {
	float: right;
	padding-right: 20px;
}

.title_right a {
	color: #8E8E8E;
}

.news_detail {
	height: 110px;
	line-height: 20px;
}

.news_detail img {
	width: 113px;
	float: left;
	margin: 10px;
}

.news_detail h2 {
	background: url("/static/img/list.jpg") no-repeat center left;
	padding-left: 10px;
	font-size: 16px;
	font-family: "微软雅黑";
	font-weight: bold;
	padding-top: 10px;
	margin-left: 5px;
}

.news_detail a {
	color: black;
}

.news_detail p {
	text-indent: 2em;
	letter-spacing: 1px;
	margin: 0 5px;
}

.news_detail span {
	float: right;
	color: greenyellow;
	margin-right: 5px;
	margin-top: -20px;
}

.news_list {
	height: 100px;
}

.news_list li {
	list-style-type: none;
	background: url("/static/img/list.jpg") no-repeat center left;
	padding-left: 10px;
	line-height: 33px;
	border-bottom: 1px dotted #CCC;
	margin-left: 5px;
}

.news_list span {
	float: right;
	color:greenyellow;
	margin-right: 5px;
}
.news_list span a {
	color:blue;
}

.news_list a {
	color: black;
}

.course {
	width: 320px;
	border: 1px solid #E8E8E8;
	background-color: #FFF;
	float: left;
	margin-left: 20px;
	margin-right: 10px;
	height: 250px;
}

.video {
	width: 320px;
	border: 1px solid #E8E8E8;
	background-color: #FFF;
    float: right;
    margin-right: 20px;
	height: 250px;
}

.video_content {
	height: 177px;
}

.video_content_top {
	height: 130px;
	margin-bottom: 10px;
	margin-top: 10px;
}

.video_content_bottom img {
	height: 55px;
	width: 214px;
}
</style>
